<template>
  <div class="detail-container">
    <div class="tabs-container">
      <el-descriptions title="基础信息" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="edit">编辑信息</el-button>
          <el-button size="small" @click="back">返回</el-button>
        </template>
        <el-descriptions-item label="站点编号">{{detailData.plotCode}}</el-descriptions-item>
        <el-descriptions-item label="站点名称">{{detailData.plotName}}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{detailData.address}}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="success" v-if="detailData.enabled == 0">启用</el-tag>
          <el-tag type="info" v-else>停用</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="负责人">{{detailData.chargePerson}}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{detailData.personPhone}}</el-descriptions-item>
        <el-descriptions-item label="热线电话">{{detailData.servicePhone}}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{detailData.openingStart}}～{{ detailData.openingEnd}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{detailData.remark}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="tabs-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="充电桩" name="1">
          <DeviceList :plotId="$route.params.id"/>
        </el-tab-pane>
        <el-tab-pane label="价格" name="3">
          <DevicePrice :rule-id="detailData.priceRuleId" @update="updatePriceRuleId"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Add ref="editFormRef" @get-page="initData" />
  </div>
</template>
<script>
import {http} from "@/api";
import DeviceList from './deviceList'
import Add from './add'
import DevicePrice from "@/views/station/devicePrice.vue";
export default {
  name: "detail",
  components: {
    DevicePrice,
    Add,
    DeviceList,
  },
  data() {
    return {
      detailData: {},
      dialogValue: false,
      activeName: '1',
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      console.log('this.$route.params',this.$route.params)
      http.plot.read(this.$route.params.id).then(res => {
        this.detailData = res.data
      })
    },
    edit() {
      this.$refs.editFormRef.open(this.detailData)
    },
    back() {
      this.$router.go(-1)
    },
    open(row) {
      this.dialogValue = true;
      http.plot.read(row.id).then(res => {
        this.detailData = res.data
      })
    },
    updatePriceRuleId(priceRuleId) {
      this.detailData.priceRuleId = priceRuleId
    }
  }
}
</script>
<style lang="scss">
.tabs-container {
  background-color: #ffffff;
  padding: 12px;
  margin-bottom: 12px;
}
</style>
